<template>
    <section>
        <DetailsHeader title="通知中心" class="mb-24" />

        <div class="page-content">
            <div class="search-content">
                <div>
                    <a-button type="primary" class="mr-8" :disabled="multiple" @click="handleDel()">删除</a-button>
                    <a-button type="primary" class="mr-8" :disabled="multipleRead" @click="handleRead()">标为已读</a-button>
                </div>
                <div>
                    <a-button type="primary" class="mr-8" @click="router.push('/messageSet')">通知设置</a-button>
                </div>
            </div>
            <!-- rowSelection -->
            <a-table :dataSource="tableList"
                :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }" rowKey="id">
                <a-table-column key="title" title="消息" data-index="title">
                    <template #default="{ record }">
                        <span class="noRead" v-if="record.status == 0"></span>
                        <a-button type="link" @click="handleView(record.id)">{{ record.title }}</a-button>
                    </template>
                </a-table-column>
                <a-table-column key="createdAt" title="时间" data-index="createdAt" />
                <a-table-column key="action" title="操作">
                    <template #default="{ record }">
                        <a-popconfirm title="确定要删除消息?" @confirm="handleDel(record.id)">
                            <a-button type="link" style="padding-left:0;">删除</a-button>
                        </a-popconfirm>
                    </template>
                </a-table-column>
            </a-table>
        </div>

    </section>
</template>

<script setup name="MessageCenter">
import { ref, reactive, computed } from 'vue'
import { useRouter } from 'vue-router'
import { getMessageListApi, messageReadApi, delMessageApi } from 'api/modules/api.messages'
import DetailsHeader from '@/components/common/DetailsHeader.vue'
import { XsyMessage } from '@/libs/util.toast'
import emitter from '@/utils/Bus.js'

const router = useRouter()

const form = ref({})
// 获取列表
const tableList = ref([])
const getList = () => {
    getMessageListApi(form.value).then(res => {
        res.code == 0 && (tableList.value = res.data.list)
    })
};

getList()

// 多选
const multiple = computed(() => !state.selectedRowKeys.length)
const multipleRead = computed(() => {
    const readIndex = state.selectedRows.findIndex(item => {
        return item.status == 1
    })

    return !state.selectedRowKeys.length || readIndex > -1;
})

const state = reactive({
    selectedRowKeys: [],
    selectedRows: []
});

const onSelectChange = (selectedRowKeys, selectedRows) => {
    state.selectedRowKeys = selectedRowKeys;
    state.selectedRows = selectedRows
};

// 删除消息
const handleDel = (id) => {
    console.log(id)
    const params = {
        id: id ? [id] : state.selectedRowKeys
    }
    delMessageApi(params).then(res => {
        if (res.code == 0) {
            XsyMessage.success('删除成功')
            state.selectedRowKeys = [];
            state.selectedRows = [];
            emitter.emit('getMsgList');
            getList()
        }
    })
}

// 标记已读
const handleRead = (id) => {
    const params = {
        id: id ? [id] : state.selectedRowKeys
    }

    messageReadApi(params).then(res => {
        if (res.code == 0) {
            XsyMessage.success('标记成功')
            state.selectedRowKeys = [];
            state.selectedRows = [];
            emitter.emit('getMsgList');
            getList()
        }
    })
}

// 查看详情
const handleView = (id) => {
    router.push({ path: '/messageDetails', query: { id } })
}

</script>

<style scoped lang="scss">
.page-content {
    background: #fff;
    padding: 24px;

    .search-content {
        display: flex;
        justify-content: space-between;
        margin-bottom: 24px;
    }
}

.noRead {
    display: inline-block;
    margin-right: 8px;
    background: #F5222D;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
</style>
